<!--  业务审核单 -->
<template>
<div class="businesscheckform">

  <div class="head">
    <!--<export-excel module-name="businessform_businesscheckform" file-name="业务审核单.xlsx"></export-excel>-->
    <h2>业务审核单</h2>
    <div class="head-ctrl">
      <div class="order-number">
        {{businessformNO}}
      </div>
      <!-- <el-button :disabled="!editable" type="primary">导出</el-button> -->
    </div>
  </div>


  <div class="table">
    <el-table :data="bb_table1"  border style="width: 100%">
      <el-table-column label="产品名称" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" v-model="scope.row.bb_productName" @input="handleInputChange(scope, 'bb_productName', $event)" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品功能" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable"  @input="handleSimpleInput" v-model="scope.row.bb_productFunction" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品用途" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_productUse" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否品牌" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_hasBrand"/>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品HS编码" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_productCode" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="出口国家" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput"  v-model="scope.row.bb_exportCountry" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="工厂资质" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_qualification" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否商检" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_needCheck" />
          </span>
        </template>
      </el-table-column>

      <el-table-column label="其他需求" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <input  :readonly="!editable" @input="handleSimpleInput" v-model="scope.row.bb_otherNeed" />
          </span>
        </template>
      </el-table-column>

      <el-table-column
      v-if="editable"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="addNewLine(scope.$index, bb_table1)" type="text" size="small">添加</el-button>
        <el-button @click="removeCurrentLine(scope.$index, bb_table1)" type="text" size="small">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>

  <div class="upload">
    <p class="upload-hint">票据/附件</p>
    <div>
      <div class="upload-btn">
        <input v-show="editable" type="file" multiple @change="selectFiles">
        <el-button :disabled="!editable" type="primary">选择附件</el-button>
      </div>

      <ul class="upload-files">
        <li @mouseover="handleOver(item)"  :key="index" @mouseout="handleOut(item)" v-for="(item,index) in this.attachedFiles">
          <span @click="download(item.id, $event)">{{item.name}}</span>
          <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
          <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
        </li>
      </ul>
    </div>
  </div>


</div>
</template>

<script>

import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload,deleteFile} from '@/server/customermanagement'
import {handleEmit} from '../common.js';

export default {
  created() {
    this.bb_table1 = _.cloneDeep(this.datas.bb_table1); 
    this.id = _.cloneDeep(this.datas.id);
    this.formInstId = _.cloneDeep(this.datas.formInstId);
  },
  updated() {
  },
  mounted(){
  },
  data() {
    return {
        id: '',
        formInstId: '',
        attachedFiles: [], //票据附件
        bb_table1: [
          {
            bb_productName: '', //产品名称
            bb_productFunction: '', //产品用途
            bb_productUse: '', //产品用途
            bb_hasBrand: '', //产品是否有品牌
            bb_productCode: '', //产品HS编码
            bb_exportCountry: '', //出口国家
            bb_qualification: '', //工厂资质
            bb_needCheck: '', //是否需要商检
            bb_otherNeed: '', //其他需求
          }
        ]
    }
  },

  watch: {
    datas(newValue, oldValue){
      this.attachedFiles = _.cloneDeep(newValue.attachedFiles);
      this.bb_table1 = _.cloneDeep(newValue.bb_table1);
      this.id = _.cloneDeep(newValue.id);
      this.formInstId = _.cloneDeep(newValue.formInstId);
    }
  },

  computed: {
  },
  props: {
    businessformNO: {
      type: String,
      required: true,
    },
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  methods: {

    /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {
          id: this.id,
          formInstId: this.formInstId,
          attachedFiles: _.cloneDeep(this.attachedFiles),
          bb_table1: _.cloneDeep(this.bb_table1)
      };

      this.$emit("fromCheckForm", "businessform_businesscheckform", newData);
    },

    /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option || key
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

    handleInputChange(scope, key, event) {

      handleEmit(null, () => {
          //通知父组件
          this.emitToParent();

          //通知外贸，事件， 行， 列， 值
          this.emitToNext("foreigntradecontract-table-line", scope.$index, key,  event.target.value);
      });
    },

    handleSimpleInput(){
      this.emitToParent();
    },

    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
      });

    },
    changeFiles(index,item) {
      deleteFile({id: item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);

    },

    addNewLine(currentIndex, table){
      let keys = [
        'bb_productName',
        'bb_productFunction',
        'bb_productUse',
        'bb_hasBrand',
        'bb_productCode',
        'bb_exportCountry',
        'bb_qualification',
        'bb_needCheck',
        'bb_otherNeed'
      ];

      let lastLine= _.cloneDeep(table[currentIndex]), newLine = {};

      keys.forEach(key => {
        newLine[key] = lastLine[key];
      });

      table.splice(currentIndex + 1, 0, newLine);

      handleEmit(null, () => {
        this.emitToParent();
        //通知外贸合同新添加一行
        this.emitToNext("foreigntradecontract-table", "add", currentIndex + 1,  newLine);
      });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);

        handleEmit(null, () => {
          this.emitToParent();
          //通知外贸合同新删除一行
          this.emitToNext("foreigntradecontract-table", "delete", currentIndex);
        });
      }
    },
  }
}
</script>

<style lang="scss">
.businesscheckform {
    padding: 20px;
    border: 1px solid #999;


    td {
      border: 1px solid #e6ebf5;
    }

    .el-table thead.is-group th {
      background: #e6e6e6;
    }

    .el-table--border td,
    .el-table--border th {
        border: 1px solid #e6ebf5;
    }

    .el-input__inner {
        border: none;
        background: transparent;
        padding: 0;
        text-align: center;
    }

    .head {
        h2 {
            text-align: center;
        }

        .head-ctrl {
            height: 60px;
            .order-number {
                padding: 16px 0;
                float: left;
            }
            button {
                float: right;
            }
        }
    }

    .table {
      margin: 20px 0px;

      .cell {
        height: 100%;
      }

    .el-table__body-wrapper {
        overflow: hidden;
    }

      .cell-edit-input {
        display: block;
        width: 100%;
        height: 100%;

        input {
          width: 100%;
          height:100%;
          border: none;
          outline: none;
          background-color: transparent;
        }
      }
    }

    .upload {
        > div {
            border: 1px solid #999;
            padding: 20px 0 40px 20px;
        }

        .upload-btn {
            position: relative;
            > input {
                opacity: 0;
                width: 100px;
                height: 40px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .upload-files {

            > li {
                width: 300px;
                padding: 10px 0;
                transition: all 0.5s linear;

                &:hover {

                  >span {
                    color: #409EFF;
                  }
                }
              }

            font-size: 16px;
            span {
                padding: 0 10px;
                cursor: pointer;
                display: inline;
            }
            span.el-icon-close:hover {
                cursor: pointer;
            }
        }
        .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
        }
    }
}
</style>
